<template>
	<view>
		<view class="goods-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="goods-title">
			<view class="collect" @tap="saveCollected">
				<image v-if="!goodsInfoList.isCollected" src="../../static/icons/collect.png" mode=""></image>
				<image v-else src="../../static/icons/collect1-active.png" mode=""></image>
			</view>
			<view class="title-box">
				<view class="price">
					￥{{goodsInfoList.price}}.00
				</view>
				<view class="oldprice">
					{{goodsInfoList.price}}.00
				</view>
				<view class="Promotion">
					没有促销使用原价
				</view>
			</view>
			<view class="title-top">
				{{goodsInfoList.detailTitle}}
			</view>
			<view class="title-desc">
				{{goodsInfoList.description}}
			</view>
		</view>
		<view class="goods-show">
			<rich-text :nodes="conter "></rich-text>
		</view>
		<view class="goods-bottom">
			<view class="goods-c">
				<view class="service">
					<button open-type="contact" class="kf"></button>
					<image src="../../static/icons/kf.png" mode=""></image>
				</view>
				<view class="btns">
					<view class="addcar">
						<button type="default" @tap="open">加入购物车</button>
					</view>
					<view class="buy">
						<button type="default" @tap="open" data-set="isbay">立即购买</button>
					</view>
				</view>

			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="box">
				<view class="goods-close" @tap="close">
					<image src="../../static/icons/x.png" mode=""></image>
				</view>
				<view class="goods-img">
					<image :src="goodsInfoList.pic" mode=""></image>
				</view>
				<view class="goods-titles">
					{{goodsInfoList.brandName}}
				</view>
				<view class="goods-stock">
					库存数量：
				</view>
				<view class="goods-content">
					<view class="goods-choose">
						商品选择


					</view>
					<view class="is-list" v-for="(item,index) in list" :key="index" @tap="choose(index)" :class="{active:index==current}">
						<view v-for="(item1,index) in JSON.parse(item.spData)" :key="index"> <text> {{item1.key}}:{{item1.value}}</text>
						</view>
					</view>
					<view class="goods-choose">
						特色服务


					</view>
					<view class="is-list" v-for="(item,index) in service" :key="index" @tap="services(index)" :class="{active:index==currentIndex}">
						<text> {{item}}</text>
					</view>
					<view class="goods-choose">
						购买数量

						<view class="step">
							<button class="reduce" @tap="reduce">-</button>
							<view class="text">
								{{num}}
							</view>
							<button class="add" @tap="add">+</button>
						</view>
					</view>
				</view>

				<view class="sure" @tap="addCart">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		goodsInfo
	} from "../../utils/goodsInfo/index.js"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {
		addCar
	} from "../../utils/goodsInfo/addCar/index.js"
	import {order} from "../../utils/goodsInfo/addCar/order/index.js"
	export default {
		data() {
			return {
				goodsInfoList: {},
				banner: {},
				conter: {},
				current: 0,
				currentIndex: 0,
				list: [],
				service: ["送货上门", "上门安装"],
				num: 1,
				SkuId: "",
				id: "",
				isbay:false,
				orderList:[],
				orderId:''
			}
		},
		methods: {
			open(event) {
				this.$refs.popup.open()
				console.log(event.currentTarget.dataset.set)
				var isbay=event.currentTarget.dataset.set
				if(isbay!=undefined){
					this.isbay=true
				}else{
					this.isbay=false
				}
				
			},
			close() {
				this.$refs.popup.close()
			},
			choose(index) {
				console.log(index)
				this.current = index
				this.SkuId = this.list[index].id
			},
			services(index) {
				this.currentIndex = index
			},
			reduce() {
				if (this.num <= 1) {
					this.num = 1
				} else {
					this.num--;
				}
			},
			add() {
				this.num++;
			},
			addCart() {
				this.orderList=[]
				var obj={}
				obj.productId=this.goodsInfoList.productCategoryId
				obj.productQuantity=this.num
				obj.productSkuId=this.SkuId
				obj.cartId=this.id
				this.orderList.push(obj)
				
				if(this.isbay==true){
					order({
						"addressId": "string",
						"orderId": "string",
						"orderItemList": this.orderList,
						"payType": 0,
						"sourceType": 0
						}).then(res=>{
							console.log(res)
							this.orderId=res.data.orderId
							console.log(this.orderId)
							uni.showToast({
								title:"购买成功 1s后跳到订单确认页",
								icon:"none"
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/cart/order/order?id='+this.orderId
								})
							},1000)
							
						})	
						
							
						
				}else{
					addCar({
						productId: this.id,
						productSkuId: this.SkuId,
						quantity: this.num
					}).then(res => {
						console.log(res)
						if (res.success) {
							uni.showToast({
								title: "加入购物车成功"
							})
							this.$refs.popup.close()
						} else {
							uni.showToast({
								title: "加入购物车失败",
								icon: "none"
							})
						}
					
					})
				}
				
			},
			saveCollected() {
				var collectedList = uni.getStorageSync("collectedList");
				if (collectedList.length > 0) {
					var item = collectedList.find(ele => ele.id == this.goodsInfoList.id);
					var index = collectedList.findIndex(ele => ele.id == this.goodsInfoList.id);
					if (item) {
						collectedList.splice(index, 1)
						uni.setStorageSync("collectedList", collectedList);
						this.goodsInfoList.isCollected = false
						uni.showToast({
							title:"取消收藏",
							icon:"none"
						})
					} else { 
						collectedList.push(this.goodsInfoList);
						uni.setStorageSync("collectedList", collectedList);
						this.goodsInfoList.isCollected = true
						uni.showToast({
							title:"收藏成功",
							icon:"none"
						})
					} 
				} else { 
					var arr = [];
					arr.push(this.goodsInfoList);
					uni.setStorageSync("collectedList", arr);
					this.goodsInfoList.isCollected = true
				}
			}

		},
		onLoad(options) {
			const id = options.id
			this.id = id
			goodsInfo(id).then(res => {
				console.log(res)
				var collectedList = uni.getStorageSync("collectedList");
				var item = collectedList.find(ele => ele.id == res.data.product.id);
				if (item) { 
					res.data.product.isCollected = true;
				} else {
					res.data.product.isCollected = false;
				}
				this.goodsInfoList = res.data.product
				console.log(this.goodsInfoList)
				this.banner = res.data.product.albumPics.split(",")
				this.conter = res.data.product.detailMobileHtml.replace(/\<img/gi,
					'<img style="width:100%;display:block;height:100%;"');
				//spData
				// checkList=res.data.product.skuList
				// console.log(res.data.product.skuList)
				this.list = res.data.product.skuList
				this.SkuId = this.list[0].id
				uni.setNavigationBarTitle({
					title: res.data.product.brandName
				})





			})
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,

		}
	}
</script>

<style scoped lang="scss">
	.goods-swiper {
		width: 100%;
		height: 634rpx;

		swiper {
			height: 634rpx;
		}

		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.goods-title {
		width: 90%;
		margin: 70rpx auto;
		position: relative;

		.collect {
			top: -132rpx;
			right: 0;
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #354e44;
			box-shadow: 0 32rpx 48rpx 0 rgba(70, 70, 70, .2);

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.title-box {
			display: flex;
			align-items: baseline;

			.price {
				font-size: 32rpx;
				line-height: 60rpx;
				color: #f2270c;
				font-family: fantasy;
			}

			.oldprice {
				margin: 0 0 0 4rpx;
				text-decoration: line-through;
				color: #b5b5b5;
				font-size: 24rpx;
				font-weight: 600;
			}

			.Promotion {
				background-color: #f2270c;
				color: #fff;
				font-size: 20rpx;
				border: 2rpx solid #ff8373
			}
		}
	}

	.title-top {
		color: #262626;
		overflow: hidden;
		font-size: 32rpx;
		font-weight: 700;
	}

	.title-desc {
		font-size: 24rpx;
		padding: 36rpx 0 0;
		line-height: 1.3;
		color: #666;

	}

	.goods-show {
		width: 90%;
		margin: 0 auto;
	}

	.goods-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 0 60rpx;
		justify-content: space-between;
		background-color: #fff;
		align-items: center;
		height: 120rpx;

		.goods-c {
			width: 90%;
			height: 100%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.service {
				width: 60rpx;
				height: 60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.btns {
				display: flex;
				justify-content: center;

				button {
					width: 238rpx;
					height: 80rpx;
					margin-top: 20rpx;
					font-size: 30rpx;
					line-height: 80rpx;
					text-align: center;
				}

				.addcar {
					button {
						background-color: #e2e2e2;
						color: #8f8f94;
					}

				}

				.buy {
					button {
						color: #fff;
						background-color: #354e44;
					}

				}
			}
		}
	}

	.box {
		width: 634rpx;
		// height: 926rpx;
		background-color: #fff;
		border-radius: 30rpx;
		position: relative;
		padding: 1rpx;

		.goods-close {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 42rpx;
			height: 42rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.goods-img {
			position: absolute;
			top: -56rpx;
			left: 96rpx;
			width: 193rpx;
			height: 192rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.goods-titles {
			font-size: 28rpx;
			color: #3e3e3e;
			margin-left: 310rpx;
			margin-top: 84rpx;
			font-weight: 600;
		}

		.goods-stock {
			font-size: 24rpx;
			color: #b0b0b0;
			margin-top: 6rpx;
			line-height: 32rpx;
			margin-left: 310rpx;
		}

		.goods-content {
			width: 80%;
			margin: 0 auto;

			.goods-choose {
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #3e3e3e;
				line-height: 40rpx;
				letter-spacing: 4rpx;
				font-weight: 600;
				margin-left: 30rpx;

			}

			.is-list {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 480rpx;
				height: 60rpx;
				border-radius: 20rpx;
				background: #f2f4f3;
				line-height: 60rpx;
				color: #3e3e3e;
				font-size: 26rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
			}

			.step {
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 246rpx;
				height: 60rpx;

				button {
					width: 60rpx;
					height: 60rpx;
					background: #f1ece7;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					margin: 0 6rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					width: 90rpx;
					height: 60rpx;
					background: #f1ece7;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					border-radius: 30rpx;
				}

			}
		}

		.sure {
			width: 208rpx;
			height: 80rpx;
			background: #354e44;
			border-radius: 28rpx;
			margin: 48rpx auto;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx
		}
	}

	.kf {
		position: absolute;
		height: 100%;
		background-color: red;
		opacity: 0;

	}

	.choose {
		width: 242rpx;
		height: 30rpx;
	}

	.active {
		border: 4rpx #354e44 solid;
	}
</style>
